<style type="text/css">
    #container {
        list-style: none;
    }
    #container li {
        margin: 5px;
    }
    .global-panel {
        border: 1px #CCC solid;
        border-radius: 3px;
    }
    .global-title {
        background-color: #999;
        color: #FFF;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
    }
</style>

<div class="global-panel">
    
    <p style="display:none">
        设置背景色<input type="text" id="setBgColor" />
        <input type="button" id="saveBtn" value="更新" />
    </p>
    
    <ul id="container">
        <li>普通按钮</li>
        <li>禁用状态按钮</li>
        <li>带有前缀的按钮</li>
        <li>带有下拉菜单按钮</li>
        <li>带有下拉菜单，且按钮事件与菜单分离</li>
        <li>普通下拉列表</li>
        <li>可输入下拉列表</li>
    </ul>
</div>
<script type="text/javascript">
    var li = $('#container li');

    ~function() {
        $('#saveBtn').on('click', function() {
            $('body').css('background-color', $('#setBgColor').val());
        });

        new Neter.Button({
            container  : li.get(0),
            name       : '&lt;&lt;Back',
            clickEvent : function(button, options, event) {
                Neter.log(options.name);
            }
        }).render().get().css({ marginLeft : 10 });
        
        new Neter.Button({
            container  : li.get(1),
            disabled   : true,
            name       : '&lt;&lt;Back',
            clickEvent : function(button, options, event) {
                Neter.log(options.name);
            }
        }).render().get().css({ marginLeft : 10 });
        
        new Neter.Button({
            container  : li.get(2),
            front      : $('<img>', {
                src       : '../../resources/images/user_group.png'
            }).css('margin', '8px 0 0 2px'),
            name       : 'UserGroup',
            clickEvent : function(button, options, event) {
                Neter.log(options.name);
            }
        }).render().get().css({ marginLeft : 10 });
        
        new Neter.Button({
            container :li.get(3),
            name      : '回复全部',
            modify    : true,
            menus     : [{
                name : '回复全部（带附件）'
            }, {
                name : '回复全部（不带附件）'
            }],
            clickEvent : function(button, options, event) {
                Neter.log(options.name);
            }
        }).render().get().css({ marginLeft : 10 });


        new Neter.Button({
            container :li.get(4),
            split     : true,
            name      : '回复全部',
            front     : $('<img>', {
                src       : '../../resources/images/reply.png'
            }).css('margin', '8px 0 0 2px'),
            menus     : [{
                name : '回复全部（带附件）'
            }, {
                name : '回复全部（不带附件）'
            }],
            clickEvent : function(button, options, event) {
                Neter.log(options.name);
            }
        }).render().get().css({ marginLeft : 10 });


        new Neter.ComBox({
            container : li.get(5),
            items : [{
                name : '邮件'
            }, {
                name : '附件'
            }, {
                name : '网盘'
            }]
        }).render();

        new Neter.ComBox({
            container  : li.get(6),
            width      : 200,
            maxSize    : 3,
            allowInput : true,
            'changeEvent' : function(combox, options, event) {
                Neter.log('触发了changeEvent事件，当前的配置信息为：%o', options, 'log');
            },
            items : [{
                name : '邮件',
            front     : $('<img>', {
                src       : '../../resources/images/reply.png'
            }).css('margin', '8px 0 0 2px'),
            }, {
                name : '附件'
            }, {
                name : '网盘'
            }]
        }).render().insert(-1, { name : '有道笔记', type : 'read'}, true).show();
    }()
</script>